<!-- StudyPlanUserList_Win.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>已选人员列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.mui-table-view {
				margin-left: 0;
			}
			.mui-table-view-cell > a:not(.mui-btn) {
				padding: 10px;
			}
			.mui-table-view-cell > a:not(.mui-btn) .course-img {
				display: block;
				width: 136px;
				max-width: 136px;
				height: 84px;
				background-image: url(../../image/course_placehoder.png);
				background-size: 136px 84px;
			}
			.mui-table-view-cell .top-content {
				height: 40px;
			}
			.mui-table-view-cell .bottom-content {
				/*padding-top: 16px;*/
				height: 44px;
			}
			.mui-table-view-cell > a:not(.mui-btn) .course_title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre-wrap;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 14px;
				color: #222;
				line-height: 20px;
			}
			.mui-table-view-cell > a:not(.mui-btn) .subtitle {
				color: #999;
				font-size: 12px;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				line-height: 14px;
			}
			/*.subtitle .right-span{
			 margin-left: 10px;
			 }*/
			.subtitle-red {
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn {
				font-size: 12px;
				font-weight: 400;
				line-height: 1.2;
				padding: 4px 6px;
				border-color: #1da4e8;
				background-color: #1da4e8;
				color: white;
				width: 70px;
			}
			.cell-btn:enabled:active {
				background-color: #2db4f8;
			}
			.bottom-content .cell-content-left {
				padding-right: 68px;
				float: left;
			}
			.bottom-content .cell-content-right {
				padding-top: 10px;
				width: 68px;
				height: 42px;
				float: right;
				position: absolute;
				right: 10px;
				top: 50px;
			}
			.button-super-div {
				padding: 2px 0;
			}
			.course-status-tag {
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 12px;
				color: white;
				padding: 2px 4px;
				line-height: 1em;
				width: 136px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;
			}
			.course-status-tag-red {
				background-color: #EC1A2B;
			}
			.course-status-tag-green {
				background-color: #1DBF53;
			}
			.tag-img {
				width: 12px;
				height: 12px;
				margin-right: 4px;
			}
			.cell-btn {
				margin-right: 10px;
			}
			.info-span {
				margin-left: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left {
				margin-right: 12px;
			}
			.top-p {
				margin-top: 10px;
			}
			.bottom-p {
				margin-top: 6px;
			}
			.mui-table-view-cell {
				padding: 10px;
			}
			.mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left {
				padding-left: 50px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
				position: absolute;
				top: 28px;
				left: -10px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
				color: #18b4ed;
			}
			.add-btn {
				color: white;
				background-color: #18b4ed;
				border-color: #18b4ed;
				margin-top: 10px;
			}
			.add-btn:enabled:active {
				background-color: #08a4dd;
				border-color: #08a4dd;
			}
			.base_icon {
				width: 20px;
				margin-top: 12px;
			}
			.bottom-div {
				height: 40px;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.bottom-checkbox input[type=checkbox]:before {
				position: absolute;
				top: 0;
				left: -10px;
			}
			.bottom-left-div {
				margin-right: 100px;
				line-height: 24px;
				font-size: 14px;
				color: #222;
			}
			.bottom-right-div {
				width: 100px;
				float: right;
				font-size: 16px;
				background-color: #18b4ed;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.base_navigation_bar, #BarAppearance {
				z-index: 1;
			}
			.top-right-p {
				float: right;
			}
			.top-left-p {
				float: left;
			}
			.normal-hide {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span id="nav_title">人员列表</span>
			<a class="base_right_item nav-item" href="#" onclick="onSelectCourseClick()"> <img src="../../icon/addNew@3x.png" class="base_icon"> </a>
			<a id="edit_btn" class="base_right_item nav-item normal-hide" href="#" onclick="editClick()"> 编辑 </a>
		</div>
		<div class="base_content_div">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<p id="finish_btn" class="top-right-p base_dark_grey base_content_font" hidden="hidden" onclick="finishClick()">
						完成
					</p>
					<p class="top-left-p base_dark_grey base_content_font">
						已选人员
					</p>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		apiready = function() {
			setupFrame();
			setupNotifi();
		}
		function setupFrame() {
			var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.base_content_div').height();
			var h = api.winHeight - y;
			var pageParam = api.pageParam;
			pageParam["sourceurl"] = window.location.pathname;
			pageParam["sourcetitle"] = document.title;
			api.openFrame({
				name : 'StudyPlanUserList_Frame',
				url : 'StudyPlanUserList_Frame.html',
				rect : {
					x : 0,
					y : y,
					w : 'auto',
					h : h
				},
				pageParam : pageParam,
				bounces : false
			});
		}

		function setupNotifi() {
			api.addEventListener({
				name : 'showTeamStuEditBtnNotifi'
			}, function(ret, err) {
				// $('#edit_btn').show();
				$('#finish_btn').hide();
			});
			//如果列表不为空才能收到该通知
			api.addEventListener({
			    name: 'showCurrentEditBtnNotifi'
			}, function(ret, err) {
			    $('#edit_btn').show();
			});
			api.addEventListener({
				name : 'setupUserEditShowOrHideNotifi'
			}, function(ret, err) {
				if (ret.value.editStatus == 1) {
					$('#edit_btn').show();
				} else {
					$('#edit_btn').hide();
				}
			});
		}
		function backClick() {
			api.closeWin();
		}

		function onSelectCourseClick() {
			api.openWin({useWKWebView:true,
			    name: 'StudyCreatPlan_SelectStu_Win',
			    url: 'StudyCreatPlan_SelectStu_Win.html',
			    pageParam: api.pageParam
			});
		}

		function editClick() {
			$('#edit_btn').hide();
			$('#finish_btn').show();
			api.sendEvent({
				name : 'editUserNotifi'
			});
		}

		function finishClick() {
			$('#edit_btn').show();
			$('#finish_btn').hide();
			api.sendEvent({//清除选择状态
				name : 'clearUserSelectStatusNotifi'
			});
		}
	</script>
</html>